<template>
  <div class="Main-container">
    {{msg}}
    <div class="g1">
      <ul>
        <li
          :key="item.id"
          v-for="item in list"
        >名字：{{ item.name }} 年龄：{{ item.age }} 爱好:{{ item.hobby }}</li>
      </ul>
      <div>
        名字：
        <input class="name" type="text" v-model="nameValue" />
      </div>
      <div>
        年龄：
        <input class="age" type="text" v-model="ageValue" />
      </div>
      <div>
        爱好：
        <input class="hobby" type="text" v-model="hobbyValue" />
      </div>
      <button @click="add">添加</button>
    </div>
    <div class="g2">
      <input type="text" v-model.number="firstnum" />
      <select v-model="third">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>
      <input type="text" v-model.number="secondnum" />
      ={{ sum }}
    </div>
    <div class="g3">
      <input :key="item.id" type="checkbox" v-for="item in arr" v-model="item.now" />
      <div>
        全选
        <input type="checkbox" v-model="flag" />
      </div>
    </div>
    {{ province }}
    <span class="s1"></span>
    <span class="s2"></span>
    <div class="g4"></div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.min.js"></script>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      list: [{
        name: '双面龚',
        age: 18,
        hobby: '当舔狗'
      }, {
        name: '道格翔',
        age: 18,
        hobby: '吃翔'
      }, {
        name: '悦刻亮',
        age: 18,
        hobby: '丁真小子'
      }],
      msg: '御剑乘风来,除魔天地间! ==== MainCom',
      nameValue: '',
      ageValue: '',
      hobbyValue: '',
      firstnum: 1,
      secondnum: 2,
      third: '+',
      province: '',
      arr: [{
        now: true
      },
      {
        now: false
      },
      {
        now: true
      },
      {
        now: false
      }]
    }
  },
  created () {
    axios({
      url: 'http://ajax-api.itheima.net/api/province'
    }).then(res => {
      console.log(res);
      this.province = res.data.data[0]
    })
  },
  mounted () {
    const s1 = document.querySelector('.s1')
    const s2 = document.querySelector('.s2')
    s1.innerHTML = '龚哥'
    s2.innerHTML = '亮哥'
  },
  computed: {
    sum () {
      switch (this.third) {
        case '+':
          return this.firstnum + this.secondnum
        case '-':
          return this.firstnum - this.secondnum
        case '*':
          return this.firstnum * this.secondnum
        case '/':
          return this.firstnum / this.secondnum
      }
      console.log(this.third);
    },
    flag: {
      get () {
        return this.arr.every(item => item.now === true)
      },
      set (latle) {
        return this.arr.forEach(ele => {
          return ele.now = latle
        })
      }
    }
  },
  methods: {
    add () {
      this.list.push({
        name: this.nameValue,
        age: this.ageValue,
        hobby: this.hobbyValue
      })
      this.nameValue = this.ageValue = this.hobbyValue = ''
    },
  }
}
</script>
<style lang='less'  scoped>
.Main-container {
  display: flex;
}
ul {
  list-style: none;
}
.g2 {
  margin-left: 20px;
}
.g3 {
  margin: 0;
}
</style>
